.chat-windows {
  position: fixed;
  bottom: 0;
  right: 20px;
  display: flex;
  gap: 16px;
  z-index: 1000;

  .chat-window {
    width: 320px;
    height: 480px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(67, 160, 71, 0.1);
    border-bottom: none;
    backdrop-filter: blur(10px);

    .chat-header {
      padding: 16px;
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
      color: white;
      border-radius: 16px 16px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user-info {
        display: flex;
        align-items: center;
        gap: 12px;

        .el-avatar {
          border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .name {
          font-weight: 500;
        }
      }

      .actions {
        display: flex;
        gap: 8px;

        .el-button {
          color: white;
          border: none;
          background: rgba(255, 255, 255, 0.1);

          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }

    .chat-messages {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background: rgba(248, 250, 249, 0.8);

      .message {
        max-width: 80%;
        padding: 12px 16px;
        margin-bottom: 12px;
        border-radius: 16px;
        position: relative;
        animation: fadeIn 0.3s ease-out;

        &:not(.self) {
          background: white;
          border: 1px solid rgba(67, 160, 71, 0.1);
          margin-right: auto;
          border-bottom-left-radius: 4px;
        }

        &.self {
          background: var(--bg-gradient);
          color: #2c3e50;
          margin-left: auto;
          border-bottom-right-radius: 4px;
        }

        .message-time {
          font-size: 12px;
          color: #8492a6;
          margin-top: 4px;
        }
      }
    }

    .chat-input {
      padding: 16px;
      background: white;
      border-top: 1px solid rgba(67, 160, 71, 0.1);

      .el-input {
        .el-input__wrapper {
          border-radius: 24px;
          background: #f8faf9;
          border: 1px solid rgba(67, 160, 71, 0.1);
          box-shadow: none;

          &:focus-within {
            border-color: var(--primary-color);
            background: white;
          }
        }

        .el-input-group__append {
          border: none;
          background: transparent;
          padding-left: 0;
        }
      }
    }
  }
} 